<template>
	<div>
		<div class="m-b-20" v-if="addShow">
			<router-link class="btn-link-large add-btn" to="edit">
				<i class="el-icon-plus"></i>&nbsp;&nbsp;添加岗位
			</router-link>
		</div>
		<el-table
		:data="tableData"
		style="width: 100%"
		@selection-change="selectItem">
			<el-table-column
			type="selection"
			width="50">
			</el-table-column>
			<el-table-column
        label="岗位名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="人数"
        prop="admins.length">
        <template slot-scope="scope">
          <router-link class="el-link el-link--primary is-underline" type="primary"
                       :to="{path: '/admin/user/list?post_id=' + scope.row.id}">
            {{scope.row.admins.length}}
          </router-link>
        </template>
      </el-table-column>
			<el-table-column
			label="备注"
			prop="remark">
			</el-table-column>
			<el-table-column
			label="状态"
      prop="status"
			width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status | status }}
          </div>
        </template>
			</el-table-column>
			<el-table-column
			label="操作"
			width="200">
        <template slot-scope="scope">
  				<div>
  					<span v-if="editShow">
  						<router-link :to="{ name: 'positionEdit', params: { id: scope.row.id }, query: { id: scope.row.id }}">
  						  <el-button
                size="small"
                type="primary">
                编辑
                </el-button>
  						</router-link>
  					</span>
  					<span v-if="deleteShow">
  						<el-button
  						size="small"
  						type="danger"
  						@click="confirmDelete(scope.row)">
  						删除
  						</el-button>
  					</span>
  				</div>
        </template>
			</el-table-column>
		</el-table>
    <div class="pos-rel p-t-20">
      <btnGroup :selectedData="multipleSelection" :type="'posts'"></btnGroup>
      <div class="block pages">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :page-size="limit"
          :current-page="currentPage"
          :total="dataCount">
        </el-pagination>
      </div>
    </div>
	</div>
</template>

<script>
  import btnGroup from '../../../Common/btn-group.vue'
  import http from '../../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { Button, Table, TableColumn, Pagination } from 'element-ui'
  Vue.use(Pagination)
  Vue.use(Button)
  Vue.use(Table)
  Vue.use(TableColumn)

  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        dataCount: null,
        currentPage: null,
        structure_id: 0,
        keywords: '',
        limit: 15
      }
    },
    watch: {
      '$route' (to, from) {
        this.init()
      }
    },
    methods: {
      search() {
        this.$router.push({ path: this.$route.path, query: { keywords: this.keywords, page: 1 }})
      },
      selectItem(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(page) {
        this.$router.push({ path: this.$route.path, query: { keywords: this.keywords, page: page }})
      },
      getKeywords() {
        let data = this.$route.query
        if (data) {
          if (data.keywords) {
            this.keywords = data.keywords
          } else {
            this.keywords = ''
          }
        }
      },
      getCurrentPage() {
        let data = this.$route.query
        if (data) {
          if (data.count) {
            this.dataCount = parseInt(data.count)
          }
          if (data.page) {
            this.currentPage = parseInt(data.page)
          } else {
            this.currentPage = 1
          }
          if (data.limit) {
            this.limit = parseInt(data.limit)
          } else {
            this.limit = 15
          }
        }
      },
      init() {
        if (this.$route.query.structure_id) {
          this.structure_id = this.$route.query.structure_id
        }
        this.getKeywords()
        this.getCurrentPage()
        this.getPositions()
      },
      confirmDelete(item) {
        this.$confirm('确认删除该岗位?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/post/', item.id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
        })
      },
      getPositions() {
        this.loading = true
        const data = {
          params: {
            keywords: this.keywords,
            page: this.currentPage,
            limit: this.limit,
            structure_id: this.structure_id
          }
        }
        this.apiGet('admin/post', data).then((res) => {
          if (res.get_param) {
            if (res.get_param.page) {
              this.currentPage = parseInt(res.get_param.page)
            } else {
              this.currentPage = 1
            }
            if (res.get_param.limit) {
              this.limit = parseInt(res.get_param.limit)
            } else {
              this.limit = 15
            }
          }
          this.handelResponse(res, (data) => {
            this.tableData = data.list
            this.dataCount = data.dataCount
            if (data.count) {
              this.dataCount = parseInt(data.count)
            }
          })
        })
      }
    },
    created() {
      this.init()
    },
    computed: {
      addShow() {
        return _g.getHasRule('posts-save')
      },
      editShow() {
        return _g.getHasRule('posts-update')
      },
      deleteShow() {
        return _g.getHasRule('posts-delete')
      }
    },
    components: {
      btnGroup
    },
    mixins: [http]
  }
</script>
